<!-- 获取组织机构列表 -->
<template>
  <div class="org_view">
    <el-cascader
      placeholder="搜索组织"
      :show-all-levels="false"
      change-on-select
      v-model="selectedOrg"
      clearable
      :options="options"
      @change="changeDept"
      filterable
    ></el-cascader>
    <el-scrollbar class="left_scroll_tree">
      <el-tree
        node-key="value"
        ref="deptTree"
        :highlight-current="true"
        :default-expanded-keys="openDeptList"
        @node-click="handleNodeClick"
        class="a_t-tree"
        :data="options"
        :props="defaultProps"
      >
        <template slot-scope="{ node }">
          <el-tooltip effect="dark" :content="node.label" placement="right" popper-class="atooltip">
            <div style="overflow:hidden;white-space:nowrap; text-overflow:ellipsis;">
              <i class="icongongsixinxi iconfont"></i>{{ node.label }}</div>
          </el-tooltip>
        </template>
      </el-tree>
    </el-scrollbar>
  </div>
</template>

<script>
import { getOrganizationTree } from "@/services/model/user";
import {
  getLocalStorageItem,
  setLocalStorageItem,
} from "@/utils/storage-helper";
import { ORGANIZATION_TREE } from "@/utils/constant";

export default {
  computed: {
    deptTree: {
      get() {
        return this.value;
      },
      set() {
        this.$emit("input", this.dept);
      },
    },
  },
  methods: {
    //选项处理，tree展开项
    findDeptName(list, index) {
      list.map((x) => {
        if (x.value === this.selectedOrg[index]) {
          let item = {
            //包含自己及之前的组织id
            deptTreeIdList: this.selectedOrg.slice(0, index + 1),
            deptName: x.label,
          };
          this.breadList.push(item);
          if (!x.children) {
            return;
          }
          index++;
          this.findDeptName(x.children, index);
        }
      });
    },
    handleNodeClick(data) {
      this.selectedOrg = data.deptTreeId.split("-") || [];
      this.changeDept();
    },
    changeBread(deptTreeIdList) {
      this.selectedOrg = deptTreeIdList || [];
      this.changeDept();
    },
    //搜索组织架构
    changeDept() {
      this.breadList = [];
      this.findDeptName(this.options, 0);
      this.openDeptList = this.selectedOrg.slice(0, this.selectedOrg.length);
      this.selectDept = this.selectedOrg[this.selectedOrg.length - 1];
      //刷新选中项
      this.$nextTick(function () {
        this.$refs.deptTree.setCurrentKey(this.selectDept);
      });
      //回调父组件，传选择的deptTreeId 和 名称(展示面包屑)
      let deptTreeId = this.selectedOrg.join("-");
      this.dept.breadList = this.breadList;
      this.dept.deptTreeId = deptTreeId;
      this.$emit("input", this.dept);
      this.$emit("change");
    },
    //获取组织
    async getOrganizationTree() {
      let org = getLocalStorageItem(ORGANIZATION_TREE);
      if (!org || org === null) {
        let res = await getOrganizationTree();
        org = res.data;
        setLocalStorageItem(ORGANIZATION_TREE, res.data, 1);
      }
      this.options = org;
      //初始展开第一个组织
      this.$nextTick(function () {
        this.openDeptList = [this.options[0].value];
        this.$refs.deptTree.setCurrentKey(this.options[0].value);
        let item = {
          //包含自己及之前的组织id
          deptTreeIdList: this.openDeptList,
          deptName: this.options[0].label,
        };
        this.breadList.push(item);
        this.dept.breadList = this.breadList;
        this.dept.deptTreeId = this.options[0].value;
        this.$emit("input", this.dept);
        this.$emit("change");
      });
    },
  },
  data() {
    return {
      options: [], //选项
      breadList: [], //选中的面包屑
      openDeptList: [],
      selectDept: "", //选中的单个组织id
      selectedOrg: [], //选中的组织treeid
      dept: {},
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  mounted() {
    this.getOrganizationTree();
  },
};
</script>

<style lang="less">
.org_view {
  background-color: white;
  height: calc(100vh - 93px);
  position: relative;
  overflow: hidden;
  box-shadow: 2px 2px 8px #757575;
  box-shadow: 2px 2px 4px #ababab;


  .el-cascader {
    width: 100%;
    padding: 10px;

    .el-input__inner {
      height: 35px;
      border: 1px solid #7c7c7c;
    }
  }

  .left_scroll_tree {
    width: 100%;
    height: 85vh;

    &.layout_scroll_tag {
      height: calc(100vh - 93px);
    }

    /deep/ .el-scrollbar__wrap {
      overflow-x: hidden;

      .el-scrollbar__view {
        height: 100%;
      }
    }
  }

  .a_t-tree {
    padding: 10px;

    .el-tree-node__content {
      height: 36px;
      margin-bottom: 2px;
      color: red !important;
      // overflow: auto;
    }

    .el-tree-node__content:hover {
      background-color: #a7a7a7 !important;
      color: white;
      border-radius: 5px;
      width: 100%;
      background: linear-gradient(
        to right,

        rgba(25, 144, 254, 1),
        rgba(25, 144, 254, 0.8),
        rgba(25, 144, 254, 0.5),
        rgba(25, 144, 254, 0.3),
      ) !important;
      color: red !important;
      .el-tooltip {
        color:white !important;
        font-size: 120%;
        font-weight: 600;

      }
    }

    &.el-tree--highlight-current
      .el-tree-node.is-current
      > .el-tree-node__content {
      border-radius: 5px;
      /*background-color: #1990FE !important;*/
      color: #ffffff;
    }

    .left_tree-node {
      height: calc(100vh - 83px);
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 20px;

      .wrap_label {
        height: calc(100vh - 83px);
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }

    .el-tree-node__content::-webkit-scrollbar {
      width: 4px;
      height: 2px;
    }

    /*正常情况下滑块的样式*/

    .el-tree-node__content::-webkit-scrollbar-thumb {
      width: 22px;
      background-color: rgba(0, 0, 0, 0.05);
      border-radius: 10px;
      -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
    }

    /*鼠标悬浮在该类指向的控件上时滑块的样式*/

    .el-tree-node__content:hover::-webkit-scrollbar-thumb {
      width: 2px;
      background-color: rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
    }

    /*鼠标悬浮在滑块上时滑块的样式*/

    .el-tree-node__content::-webkit-scrollbar-thumb:hover {
      background-color: rgba(0, 0, 0, 0.4);
      -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
    }

    /*正常时候的主干部分*/

    .el-tree-node__content::-webkit-scrollbar-track {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
      background-color: white;
    }

    /*鼠标悬浮在滚动条上的主干部分*/

    .el-tree-node__content::-webkit-scrollbar-track:hover {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
      background-color: rgba(0, 0, 0, 0.01);
    }
  }
}
</style>

<style lang="less" scoped>
// 修改Tooltip样式
.atooltip.el-tooltip__popper[x-placement^="right"] .popper__arrow {
  border-right-color: white;
}
.atooltip.el-tooltip__popper[x-placement^="right"] .popper__arrow:after {
   border-right-color: white;

}
.atooltip {
  background: white !important;
  color: black !important;
  font-size: 110%;
box-shadow: 2px 2px 8px black;
  // font-weight: 600;
}
.el-tooltip{
  padding:10px 0px !important;
  width: 200% !important;

   /*height: 20px !important;*/
  // background: red !important;
}
</style>
